<!-- 忘记密码页面  -->
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <!-- 页面显示适应移动设备 -->
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

  <title>我的APP</title>
  <link rel="stylesheet" href="resources\we-vue\style.css">
  <link rel="stylesheet" href="resources\css\font-awesome.min.css">

  <style>
    /*元素选择器*/

    html {
      height: 100%;
    }

    body {

      height: 100%;
      padding: 0px;
      /*内边距*/
      margin: 0px;
      /*外边距*/

    }

    .my-container {


      width: 100%;
      height: 100%;
      background-color: #d7e9e3;

    }
  </style>


</head>


<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->




  <!-- div ：举行区域 -->
  <div id="app" class="my-container">

    <div ref="div" style="width: 100%;height:30%;"></div>


  </div>

</body>
<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>
<script src="resources\js\echarts.min.js"></script>


<script>
  new Vue({
    el: '#app',
    data: {


    },
    methods: {


    },
    mounted() {

      console.log(this.$refs.div);

      var myChart = echarts.init(this.$refs.div);

      function fetchData(cb) {
        // 通过 setTimeout 模拟异步加载
        setTimeout(function () {
          cb({
            categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            data: [5, 20, 36, 10, 10, 20]
          });
        }, 1000);
      }

      // 初始 option
      option = {
        title: {
          text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: []
        }]
      };

      fetchData(function (data) {
        myChart.setOption({
          xAxis: {
            data: data.categories
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
          }]
        });
      });

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);


    }

  });
</script>


</html>